<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--图片滚动可控start-->
<script type="text/javascript" src="../../libs/js/pic/switchable.js"></script>
<script type="text/javascript" src="../../libs/js/pic/switchable.effect.js"></script>
<!--图片滚动可控end-->
</head>
<body>
<div class="page_content">


	<div class="groupTitle"><span>1、基本使用</span></div>
   
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next0" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev0" class="prev"></a>
		<div id="trigger0" class="scrollable-trigger"></div>
	</div>
	<div id="panel0" class="scrollable-panel">
		<div class="clearfix">
			<img src="../../libs/images/demo/gallery/1.jpg" />
			<img src="../../libs/images/demo/gallery/2.jpg" />
			<img src="../../libs/images/demo/gallery/4.jpg" />
			<img src="../../libs/images/demo/gallery/5.jpg" />
			<img src="../../libs/images/demo/gallery/6.jpg" />
			<img src="../../libs/images/demo/gallery/7.jpg" />
			<img src="../../libs/images/demo/gallery/8.jpg" />
			<img src="../../libs/images/demo/gallery/9.jpg" />
			<img src="../../libs/images/demo/gallery/2.jpg" />
		</div>
	</div>

  <div class="height_15"></div>	
	


	<div class="groupTitle"><span>2、自动播放并添加控制按钮</span></div>
   
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next1" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev1" class="prev"></a>
		<div id="trigger1" class="scrollable-trigger"></div>
	</div>
	<div id="panel1" class="scrollable-panel">
		<div class="clearfix">
			<img src="../../libs/images/demo/gallery/3.jpg" />
			<img src="../../libs/images/demo/gallery/4.jpg" />
			<img src="../../libs/images/demo/gallery/5.jpg" />
			<img src="../../libs/images/demo/gallery/6.jpg" />
			<img src="../../libs/images/demo/gallery/7.jpg" />
			<img src="../../libs/images/demo/gallery/8.jpg" />
			<img src="../../libs/images/demo/gallery/9.jpg" />
			<img src="../../libs/images/demo/gallery/1.jpg" />
			<img src="../../libs/images/demo/gallery/2.jpg" />
		</div>
	</div>
	<div class="ctrl" style="width:437px;">
		<input type="button" keepDefaultStyle="true" class="play" onClick="api.play();" title="播放"/>
		<input type="button" keepDefaultStyle="true" class="pause" onClick="api.pause();" title="暂停"/>
		<input type="button" keepDefaultStyle="true" class="stop" onClick="api.stop();" title="停止"/>
	</div>

  <div class="height_15"></div>



	<div class="groupTitle"><span>3、连续滚动</span></div>
   
	<div class="trigger-bar">
		<a href="javascript:void(0);" title="下翻" id="next2" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev2" class="prev"></a>
		<div id="trigger2" class="scrollable-trigger"></div>
	</div>
	
	<div id="panel2" class="scrollable-panel">
		<div class="clearfix">
			<img src="../../libs/images/demo/gallery/3.jpg" />
			<img src="../../libs/images/demo/gallery/4.jpg" />
			<img src="../../libs/images/demo/gallery/5.jpg" />
			<img src="../../libs/images/demo/gallery/6.jpg" />
			<img src="../../libs/images/demo/gallery/7.jpg" />
			<img src="../../libs/images/demo/gallery/8.jpg" />
			<img src="../../libs/images/demo/gallery/9.jpg" />
			<img src="../../libs/images/demo/gallery/2.jpg" />
			<img src="../../libs/images/demo/gallery/1.jpg" />
		</div>
	</div>

  <div class="height_15"></div>





	<div class="groupTitle"><span>4、自定义宽高和显示个数</span></div>
   
	<div class="trigger-bar" style="width:890px;">
		<a href="javascript:void(0);" title="下翻" id="next4" class="next"></a>
		<a href="javascript:void(0);" title="上翻" id="prev4" class="prev"></a>
		<div id="trigger4" class="scrollable-trigger"></div>
	</div>
	
	<div id="panel4" class="scrollable-panel" style="width:890px;height:140px;">
		<div class="clearfix">
			<img src="../../libs/images/demo/gallery/9.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/8.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/6.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/7.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/5.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/4.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/3.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/2.jpg" style="width:200px;height:122px;"/>
		</div>
	</div>




	<div class="groupTitle"><span>5、自动播放</span></div>
   
	<div class="trigger-bar" style="display:none;height:0px;overflow:hidden;">
		<div id="trigger5" class="scrollable-trigger"></div>
	</div>
	<div id="panel5" class="scrollable-panel" style="width:890px;height:140px;">
		<div class="clearfix">
			<img src="../../libs/images/demo/gallery/1.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/9.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/7.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/5.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/4.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/6.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/3.jpg" style="width:200px;height:122px;"/>
			<img src="../../libs/images/demo/gallery/2.jpg" style="width:200px;height:122px;"/>
		</div>
	</div>


</div>
<script type="text/javascript">
function initComplete(){
	//基本使用
	$("#trigger0").switchable("#panel0 > div > img", {
		triggerType: "click", /* 触发方式*/
		effect: "scroll", /* 滚动效果，也可是fade*/
		steps: 3, /* 每次滚动个数*/
		visible: 3, /* 可见个数*/
		circular: true /* 是否循环*/
	})
	var api0 = $("#trigger0").switchable();
	$("#next0").click(function(){
		api0.next();
	});
	$("#prev0").click(function(){
		api0.prev();
	});


	//自动播放并添加控制按钮 
	window.api = $("#trigger1").switchable("#panel1 > div > img", {
		triggerType: "click",
		effect: "scroll",
		steps: 3,
		visible: 3,
		circular: true
	}).autoplay({ api: true });
	
	$("#next1").click(function(){
		api.next();
	});
	$("#prev1").click(function(){
		api.prev();
	});
	
	
	//末尾不返回
	$("#trigger2").switchable("#panel2 > div > img", {
		triggerType: "click",
		effect: "scroll",
		steps: 3,
		visible: 3
	}).carousel();
	
	var api2 = $("#trigger2").switchable();
	$("#next2").click(function(){
		api2.next();
	});
	$("#prev2").click(function(){
		api2.prev();
	});
	
	
	//自定义显示个数
	$("#trigger4").switchable("#panel4 > div > img", {
		triggerType: "click",
		effect: "scroll",
		steps: 4,
		visible: 4
	}).carousel();
	var api4 = $("#trigger4").switchable();
	$("#next4").click(function(){
		api4.next();
	});
	$("#prev4").click(function(){
		api4.prev();
	});
	
	//自动播放
	 $("#trigger5").switchable("#panel5 > div > img", {
		triggerType: "click",
		effect: "scroll",
		steps: 3,
		visible: 3,
		circular: true
	}).carousel().autoplay({ api: true });
	
	
};
</script>
</body>
</html>